<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>JavaScript 表单</h1>

<hr>
<h2>JavaScript 表单验证</h2>
<p>
HTML 表单验证可以通过 JavaScript 来完成。</p>
<p></p><p>
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
</p>

<div class="example">
<h2 class="example">JavaScript 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">validateForm</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
    </span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">x</span><span class="hl-code"> = </span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">forms</span><span class="hl-brackets">[</span><span class="hl-quotes">"</span><span class="hl-string">myForm</span><span class="hl-quotes">"</span><span class="hl-brackets">]</span><span class="hl-brackets">[</span><span class="hl-quotes">"</span><span class="hl-string">fname</span><span class="hl-quotes">"</span><span class="hl-brackets">]</span><span class="hl-code">.</span><span class="hl-identifier">value</span><span class="hl-code">;
    </span><span class="hl-reserved">if</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">x</span><span class="hl-code"> == </span><span class="hl-reserved">null</span><span class="hl-code"> || </span><span class="hl-identifier">x</span><span class="hl-code"> == </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
        </span><span class="hl-identifier">alert</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">需要输入名字。</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
        </span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">false</span><span class="hl-code">;
    </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
<button class="copy-code-button" type="button" data-clipboard-text="function validateForm() {
    var x = document.forms[&quot;myForm&quot;][&quot;fname&quot;].value;
    if (x == null || x == &quot;&quot;) {
        alert(&quot;需要输入名字。&quot;);
        return false;
    }
}" style="display: none;"></button></div>
</div>
<p>以上 JavaScript 代码可以通过 HTML 代码来调用：</p>

<div class="example">
<h2 class="example">HTML 表单实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-code">&lt;</span><span class="hl-identifier">form</span><span class="hl-code"> </span><span class="hl-identifier">name</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">myForm</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">action</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">demo_form.php</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">onsubmit</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">return validateForm()</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">method</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">post</span><span class="hl-quotes">"</span><span class="hl-code">&gt;
名字: &lt;</span><span class="hl-identifier">input</span><span class="hl-code"> </span><span class="hl-identifier">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">name</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">fname</span><span class="hl-quotes">"</span><span class="hl-code">&gt;
&lt;</span><span class="hl-identifier">input</span><span class="hl-code"> </span><span class="hl-identifier">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">submit</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">value</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">提交</span><span class="hl-quotes">"</span><span class="hl-code">&gt;
&lt;/</span><span class="hl-identifier">form</span><span class="hl-code">&gt;</span></div>
<button class="copy-code-button" type="button" data-clipboard-text="<form name=&quot;myForm&quot; action=&quot;demo_form.php&quot; onsubmit=&quot;return validateForm()&quot; method=&quot;post&quot;>
名字: <input type=&quot;text&quot; name=&quot;fname&quot;>
<input type=&quot;submit&quot; value=&quot;提交&quot;>
</form>"></button></div>
<br>
<a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_validation_js" rel="noopener noreferrer">尝试一下 »</a>
</div>
<hr>
<h2>JavaScript 验证输入的数字</h2>

<p>JavaScript 常用于对输入数字的验证：</p>

<div class="example">
<div class="example_code">
<script>
function myFunction() {
    var x;
    var text = "输入正确";

    //Get the value of input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number, or x is less than one, or x is grather than 10 then
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

<p>请输入 1 到 10 之间的数字：</p>
<input id="numb" type="text">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<button class="copy-code-button" type="button" data-clipboard-text="function myFunction() {
    var x;
    var text = &quot;输入正确&quot;;

    //Get the value of input field with id=&quot;numb&quot;
    x = document.getElementById(&quot;numb&quot;).value;

    // If x is Not a Number, or x is less than one, or x is grather than 10 then
    if (isNaN(x) || x < 1 || x > 10) {
        text = &quot;输入错误&quot;;
    }
    document.getElementById(&quot;demo&quot;).innerHTML = text;
}


请输入 1 到 10 之间的数字：

提交"></button></div><br>
 <a class="tryitbtn" href="/try/try.php?filename=tryjs_validation_number" target="_blank" rel="noopener noreferrer">尝试一下 »</a>
</div>
<hr>

<h2>HTML 表单自动验证</h2>
<p>HTML 表单验证也可以通过浏览器来自动完成。</p>

<p>如果表单字段 (fname) 的值为空,  <strong>required</strong> 属性会阻止表单提交：</p>



<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-code">&lt;</span><span class="hl-identifier">form</span><span class="hl-code"> </span><span class="hl-identifier">action</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">demo_form.php</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">method</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">post</span><span class="hl-quotes">"</span><span class="hl-code">&gt;
  &lt;</span><span class="hl-identifier">input</span><span class="hl-code"> </span><span class="hl-identifier">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">name</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">fname</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">required</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">required</span><span class="hl-quotes">"</span><span class="hl-code">&gt;
  &lt;</span><span class="hl-identifier">input</span><span class="hl-code"> </span><span class="hl-identifier">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">submit</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">value</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">提交</span><span class="hl-quotes">"</span><span class="hl-code">&gt;
&lt;/</span><span class="hl-identifier">form</span><span class="hl-code">&gt;</span></div>
<button class="copy-code-button" type="button" data-clipboard-text="<form action=&quot;demo_form.php&quot; method=&quot;post&quot;>
  <input type=&quot;text&quot; name=&quot;fname&quot; required=&quot;required&quot;>
  <input type=&quot;submit&quot; value=&quot;提交&quot;>
</form>"></button></div>
<br>
<a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryjs_validation_html" rel="noopener noreferrer">尝试一下 »</a>
</div>




<blockquote>
<p>Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。</p>
</blockquote>
<hr>
<h2>数据验证</h2>
<p>
数据验证用于确保用户输入的数据是有效的。</p>

<p>典型的数据验证有：</p>
<ul>
	<li>必需字段是否有输入?</li>
	<li>用户是否输入了合法的数据?</li>
    <li>在数字字段是否输入了文本?</li>
</ul>


<p>大多数情况下，数据验证用于确保用户正确输入数据。</p>
<p>数据验证可以使用不同方法来定义，并通过多种方式来调用。</p>


<p><strong>服务端数据验证</strong>是在数据提交到服务器上后再验证。</p>
<p><strong>客户端数据验证</strong>是在数据发送到服务器前，在浏览器上完成验证。</p>

<hr>
<h2>HTML 约束验证</h2>
<p>HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。</p>
<p>约束验证是表单被提交时浏览器用来实现验证的一种算法。</p>
<p>HTML 约束验证基于：</p>
<ul>
 <li><strong>HTML 输入属性</strong></li>
 <li><strong>CSS 伪类选择器</strong></li>
 <li><strong>DOM 属性和方法</strong></li>
</ul>
<h3>约束验证 HTML 输入属性</h3>
<table class="reference">
<tbody><tr>
<th style="width:25%">属性</th>
<th>描述</th>
</tr>
<tr>
<td>disabled</td>
<td>规定输入的元素不可用</td>
</tr>
<tr>
<td>max</td>
<td>规定输入元素的最大值</td>
</tr>
<tr>
<td>min</td>
<td>规定输入元素的最小值</td>
</tr>
<tr>
<td>pattern</td>
<td>规定输入元素值的模式</td>
</tr>
<tr>
<td>required</td>
<td>规定输入元素字段是必需的</td>
</tr>
<tr>
<td>type&nbsp;</td>
<td>规定输入元素的类型</td>
</tr>
</tbody></table>
<p>完整列表，请查看 <a target="_blank" href="/html/html5-form-attributes.html" rel="noopener noreferrer">HTML 
输入属性</a>。</p>
<h3>约束验证 CSS 伪类选择器</h3>
<table class="reference">
<tbody><tr>
<th style="width:25%">选择器</th>
<th>描述</th>
</tr>
<tr>
<td>:disabled</td>
<td>选取属性为 "disabled" 属性的 input 元素</td>
</tr>
<tr>
<td>:invalid</td>
<td>选取无效的 input 元素</td>
</tr>
<tr>
<td>:optional</td>
<td>选择没有"optional"属性的 input 元素</td>
</tr>
<tr>
<td>:required</td>
<td>选择有"required"属性的 input 元素</td>
</tr>
<tr>
<td>:valid</td>
<td>选取有效值的 input 元素</td>
</tr>
</tbody></table>
<p>完整列表，请查看 <a href="/css/css-pseudo-classes.html">CSS 
伪类</a>。</p>

